<script lang="ts">
	export let code: string = ''; // 传入代码
	export let showModal: boolean = false; // 控制窗口显示
  
	const closeModal = () => {
	  showModal = false;
	};
  </script>
  
  {#if showModal}
	<div class="modal-overlay" on:click={closeModal}>
	  <div class="modal-content" on:click|stopPropagation>
		<h3>Code Block</h3>
		<pre><code>{code}</code></pre>
		<button on:click={closeModal}>Close</button>
	  </div>
	</div>
  {/if}
  
  <style>
	.modal-overlay {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background: rgba(0, 0, 0, 0.5);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
  
	.modal-content {
	  background: white;
	  padding: 20px;
	  border-radius: 8px;
	  max-width: 600px;
	  width: 100%;
	}
  
	pre {
	  background-color: #f4f4f4;
	  padding: 10px;
	  border-radius: 4px;
	  overflow-x: auto;
	}
  
	button {
	  margin-top: 10px;
	  background-color: #007bff;
	  color: white;
	  border: none;
	  padding: 8px 16px;
	  border-radius: 4px;
	  cursor: pointer;
	}
  
	button:hover {
	  background-color: #0056b3;
	}
  </style>
  